<template>
<div>
  <el-select v-model="value" placeholder="请选择" @change="getGroup(value)">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button size="mini" type="text" @click="open">删除</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
    methods: {
      getGroup(e) {
        console.log('xjh'+e)
      },

       //删除弹框================================
        open() {
            this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '保存',
            cancelButtonText: '放弃修改'
            })
            .then(() => {
                this.$message({
                type: 'info',
                message: '保存修改'
                });
            })
            .catch(action => {
                this.$message({
                type: 'info',
                message: action === 'cancel'
                    ? '放弃保存并离开页面'
                    : '停留在当前页面'
                })
            });
      }
    //   ----------------------------------
    },
  }
</script>